<!DOCTYPE html>
<html>

<head>
  <title>Wire-Pod Setup</title>
  <!-- Meta Apple tags for a PWA like experience. -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="default">
  <meta name="theme-color" content="#1e1e1e">
  <link rel="stylesheet" type="text/css" href="css/style.css" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <script src="https://kit.fontawesome.com/7508f396ac.js" crossorigin="anonymous"></script>
  <meta http-equiv="Cache-Control" content="no-store, no-cache, must-revalidate, max-age=0">
  <meta http-equiv="Pragma" content="no-cache">
  <meta http-equiv="Expires" content="Thu, 01 Jan 1970 00:00:00 GMT">
</head>

<body>
  <div id="outer">
    <div id="content" class="">
      <h1>Wire-Pod Setup</h1>
      <hr />
      <div class="main-nav-parent">
        <div class="main-nav-child">
          <a href="index.html"><i class="fa-solid fa-reply"></i><br />Back</a>
        </div>
        <div class="main-nav-child">
          <a href="#" onclick="showWeather(); return false;"><i class="fa solid fa-cloud-sun" id="icon-Weather"
              name="icon"></i><br />Weather</a>
        </div>
        <div class="main-nav-child">
          <a href="#" onclick="showKG(); return false;"><i class="fa solid fa-diagram-project" id="icon-KG"
              name="icon"></i><br />Knowledge Graph</a>
        </div>
        <div class="main-nav-child">
          <a href="#" onclick="showLanguage(); return false;"><i class="fa-solid fa-language" id="icon-Language"
              name="icon"></i><br />Set Language</a>
        </div>
        <!--<div class="main-nav-child"><a href="#" onclick="showRestart(); return false;"><i class="fa solid fa-arrow-rotate-right" id="icon-Restart" name="icon"></i><br/>Restart Wire-Pod</a></div> -->
      </div>
      <hr />

      <div id="section-weather" style="display: none">
        <h3>Weather API Setup</h3>
        <hr class="small-hr">
        <div>
          <p>Set the weather provider you'd like to use.</p>
          <hr class="small-hr">
          <div id="addWeatherProviderAPI"></div>
          <form id="weatherAPIAddForm">
            <label for="weatherProvider">Weather API Provider:</label>
            <select name="weatherProvider" id="weatherProvider" form="weatherAPIAddForm" onchange="checkWeather()">
              <option value="" selected>None</option>
              <option value="openweathermap.org">
                OpenWeatherMap
              </option>
              <option value="weatherapi.com">WeatherAPI</option>
            </select><br />
            <span id="apiKeySpan" style="display: none">
              <label for="apiKey">API Key:</label><br />
              <input class="tinput" type="text" name="apiKey" id="apiKey" /><br />
            </span>
          </form>
          <hr class="small-hr">
          <button onclick="sendWeatherAPIKey()">
            Apply Weather Settings
          </button>
          <div id="addWeatherProviderAPIStatus"></div>
          <hr />
        </div>
      </div>

      <div id="section-kg" style="display: none">
        <h3>Knowledge Graph Setup</h3>
        <hr class="small-hr">
        <div>
          <p>Select the knowledge provider you would like to use, then enter the required information.</p>
          <hr class="small-hr">
          <div id="addKGProviderAPI"></div>
          <form id="kgAPIAddForm">
            <label for="kgProvider">Knowledge Graph API Provider:</label>
            <select name="kgProvider" id="kgProvider" form="kgAPIAddForm" onchange="checkKG()">
              <option value="" selected>None</option>
              <option value="openai">OpenAI</option>
              <option value="houndify">Houndify</option>
              <option value="together">Together</option>
              <option value="custom">Custom</option>
            </select>
            <span id="houndifyInput" style="display: none">
              <small class="desc">To use Houndify, create an account at
                <a href="https://www.houndify.com/signup">houndify.com</a>,
                create a free domain, and enter the Client ID and Key
                here.</small><br />
              <label for="houndID">Houndify Client ID:</label>
              <input type="text" name="houndID" id="houndID" /><br />
              <label for="houndKey">Houndify Client Key:</label>
              <input type="text" name="houndKey" id="houndKey" /><br />
            </span>
            <span id="togetherInput" style="display: none">
              <small class="desc">To use Together, create an account at
                <a href="https://www.together.xyz">together.com</a>, create
                a free domain, and enter the Model Name and Together Key
                here.</small><br />
              <label for="togetherModel">Together Model Name: <small class="desc">(leave blank for default
                  meta-llama/Llama-3-70b-chat-hf)</small></label>
              <input type="text" name="togetherModel" id="togetherModel" /><br />
              <label for="togetherKey">Together Key:</label>
              <input type="text" name="togetherKey" id="togetherKey" /><br />
              <label for="togetherAIPrompt">GPT Prompt <small class="desc">(leave blank for
                  default):</small></label><br />
              <small><label class="desc" for="togetherAIPrompt">(default: "You are a helpful, animated robot called
                  Vector. Keep the response concise yet
                  informative.")</label></small>
              <input type="text" name="togetherAIPrompt" id="togetherAIPrompt" /><br />
            </span>
            <span id="openAIInput" style="display: none">
              <label for="openaiKey">OpenAI Key:</label>
              <input type="text" name="openaiKey" id="openaiKey" /><br />
              <label for="openaiKey">GPT Prompt <small class="desc">(leave blank for default):</small></label><br />
              <small><label class="desc" for="openAIPrompt">(default: "You are a helpful, animated robot called
                  Vector. Keep the response concise yet
                  informative.")</label></small>
              <input type="text" name="openAIPrompt" id="openAIPrompt" /><br />
              <label for="openaiVoice">OpenAI TTS voice for non-English languages:</label><br />
              <small class="desc">See <a target="_blank"
                  href="https://platform.openai.com/docs/guides/text-to-speech/voice-options">OpenAI's TTS site</a> to
                demo each voice.</small><br />
              <select name="openaiVoice" id="openaiVoice">
                <option value="fable" selected>Fable</option>
                <option value="alloy">Alloy</option>
                <option value="echo">Echo</option>
                <option value="onyx">Onyx</option>
                <option value="nova">Nova</option>
                <option value="shimmer">Shimmer</option>
              </select>
            </span>

            <span id="customAIInput" style="display: none">
              <small class="desc">All LLM hosts that have OpenAI API compatibility are supported. For advanced
                users.</small><br />
              <label for="customKey">API Key <small class="desc">(for ollama, this is just 'ollama')</small>:</label>
              <input type="text" name="customKey" id="customKey" /><br />
              <label for="customAIEndpoint">API Endpoint <small class="desc">(i.e.
                  http://localhost:11434/v1)</small>:</label>
              <input type="text" name="customAIEndpoint" id="customAIEndpoint" /><br />
              <label for="customModel">LLM Model Name <small class="desc">(i.e. 'llama3')</small>:</label>
              <input type="text" name="customModel" id="customModel" /><br />
              <label for="customAIPrompt">LLM Prompt <small class="desc">(leave blank for
                  default)</small>:</label><br />
              <small><label class="desc" for="customAIPrompt">(default: "You are a helpful, animated robot called
                  Vector. Keep the response concise yet
                  informative.")</label></small>
              <input type="text" name="customAIPrompt" id="customAIPrompt" /><br />
            </span>

            <div style="text-align: left;">
              <span id="intentGraphInput" style="display: none;">
                <input type="checkbox" id="intentyes" name="intentgselect" onclick="checkKG()" />
                <label class="checkbox-label" for="intentyes">
                  Enable intent-graph. This
                  forwards the request to the LLM if the regular intent
                  processor didn't understand what you said.
                </label>
              </span>
              <span id="llmCommandInput" style="display: none">
                <input type="checkbox" id="commandYes" name="commandDoselect" />
                <label class="checkbox-label" for="commandYes">
                  Allow the LLM to make the robot perform animations and other actions during the response.
                </label>
              </span>
              <span id="saveChatInput" style="display: none">
                <input type="checkbox" id="saveChatYes" name="saveChatselect" />
                <label class="checkbox-label" for="saveChatYes">
                  Enable conversations via "I have a question". This also allows previous chats to be used in the
                  context of future responses. LLM actions (the box above this one) must be enabled for conversations to work.
                </label></br>
                <a href="#" onclick="deleteSavedChats()">Delete Saved Chats</a>
              </span>
              <span id="openAIVoiceForEnglishInput" style="display: none">
                <input type="checkbox" id="voiceEnglishYes" name="voiceEnglishselect" />
                <label class="checkbox-label" for="voiceEnglishYes">
                  Use the OpenAI TTS voice for English as well.
                </label>
              </span>
            </div>

          </form>
        </div>
        <hr class="small-hr">
        <button onclick="sendKGAPIKey()">Apply Settings</button>
        <div id="addKGProviderAPIStatus"></div>
        <hr />
      </div>

      <div id="section-restart" style="display: none">
        <h3>Restart Wire-Pod</h3>
        <div>
          <p>
            Restart Wire-Pod to apply the initial setup settings immediately
          </p>
          <div id="restart"></div>
          <div>
            <button onclick="sendRestart()">Restart Wire-Pod</button>
          </div>
          <div id="restartStatus"></div>
          <hr />
        </div>
      </div>

      <div id="section-language" style="display: none">
        <h2>STT Language</h2>
        <hr class="small-hr">
        <p>Set the speech-to-text language you'd like wire-pod to use.</p>
        <hr class="small-hr">
        <div id="languageStatus"></div>
        <div id="languageSelectionDiv">
          <div>
            <select name="languageSelection" id="languageSelection">
              <option value="en-US">English (US)</option>
              <option value="it-IT">Italian (IT)</option>
              <option value="es-ES">Spanish (ES)</option>
              <option value="fr-FR">French (FR)</option>
              <option value="de-DE">German (DE)</option>
              <option value="pt-BR">Portuguese (BR)</option>
              <option value="pl-PL">Polish (PL)</option>
              <option value="tr-TR">Turkish (TR)</option>
              <option value="zh-CN">Chinese (CN)</option>
              <option value="ru-RU">Russian (RU)</option>
              <option value="nt-NL">Dutch (NL)</option>
              <option value="uk-UA">Ukrainian (UA)</option>
              <option value="vi-VN">VietNamese (VN)</option>
            </select>
          </div>
          <div>
            <hr class="small-hr">
            <button onclick="setSTTLanguage()">
              Set Language
            </button>
          </div>
        </div>
        <hr />
      </div>
    </div>
  </div>
</body>
<script src="./js/ui.js"></script>
<script src="./js/main.js"></script>
<script src="./sdkapp/js/main.js"></script>
<script>
  updateWeatherAPI();
  updateKGAPI();
</script>

</html>
